<template>
  <div class="select-device" style="width: 240px;margin-bottom: 10px;display: inherit;">
    <select-device v-model:dn="selectedDn" placeholder="选择设备" @on-select="hadnleSelectDevice" />
  </div>
  <div v-if="selectedDn">
    <el-row style="margin-bottom: 10px;">
      <el-col :span="24">
        <el-row v-if="swSlProductsShow" class="service-box">
          <el-form ref="formRef" label-width="50px">
            <el-form-item label="开关" prop="sw">
              <el-switch v-model="sw" :active-value = "1" :inactive-value = "0" />
            </el-form-item>
            <el-form-item label="亮度" prop="sl">
              <el-slider v-model="sl" :max="100" :min="0" />
            </el-form-item>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SelectDevice from '@/components/YtSelect/select-device.vue'
// 引入公共方法获取设备属性、判断是否为灯控设备和网关
import { getDeviceProperties, isLightController } from '@/utils/deviceUtils'

export default defineComponent({
  name: 'DeviceAction',
  props: {
    services: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    SelectDevice,
  },
  data() {
    return {
      showDeviceSelector: false,
      selectedPk: '',
      selectedDn: '',
      properties: [],
      servicesRef: this.services,
      propertiesList: [],
      servicesList: [],
      swSlProductsShow: false, // 选择设备后service-box显示为开关亮度的组件
      sw: 0,
      sl: 0,
      swName: '',
      slName: '',
      gwmac: '',
    }
  },
  emits: ['update:services'],
  mounted() {
    console.log('1111', this.services)
    this.servicesRef = this.services
    this.services.map((m, i) => {
      if (m.device && i === 0) {
        const firstObj = m.device ? m.device.split('/') : ''
        if (firstObj) {
          this.selectedPk = firstObj[0] || ''
          this.selectedDn = firstObj[1] === '#' ? '' : firstObj[1]
        }
         
        // 尝试判断产品类型并设置UI状态
        if (isLightController(this.selectedPk)) {
          this.swSlProductsShow = true
          
          // 设置对应的属性名称
          const { swName, slName } = getDeviceProperties(this.selectedPk)
          this.swName = swName
          this.slName = slName
          
          // 如果有inputData数据，初始化开关和亮度值
          if (m.inputData && m.inputData.length > 0) {
            m.inputData.forEach(input => {
              if (input.identifier === this.swName) {
                this.sw = input.value
              } else if (input.identifier === this.slName) {
                this.sl = input.value
              } else if (input.identifier === 'gwmac') {
                this.gwmac = input.value
              }
            })
          }
        }
      }
    })
  },
  methods: {
    openDeviceSelector() {
      this.showDeviceSelector = !this.showDeviceSelector
    },
    // 选择完设备根据设备的device.productKey显示不同service-box组件
    hadnleSelectDevice(device) {
      if (!device.productKey) return

      this.selectedPk = device.productKey
      this.selectedDn = device.deviceName

      // const productName = device.product.name
      if (isLightController(this.selectedPk)) {
        this.swSlProductsShow = true
      } else {
        this.swSlProductsShow = false
      }

      const { swName, slName, gwmac } = getDeviceProperties(this.selectedPk)
      this.swName = swName
      this.slName = slName
      // 单独处理微自然单灯控制器的 gwmac
      this.gwmac = this.selectedPk === 'hATm2Tswh3TDik8W' ? device.parentId : gwmac
      
      // 更新设备信息到services
      this.updateServices()
    },
    // 更新services数据
    updateServices() {
      if (!this.selectedPk || !this.selectedDn) return
      
      // 构建device字符串
      const devicePath = `${this.selectedPk}/${this.selectedDn}`
      
      // 构建输入数据
      const inputData = []
      
      // 仅当显示开关亮度控件时添加这些参数
      if (this.swSlProductsShow && this.swName && this.slName) {
        inputData.push({
          identifier: this.swName,
          value: this.sw
        })
        inputData.push({
          identifier: this.slName,
          value: this.sl
        })
        if(this.selectedPk === 'hATm2Tswh3TDik8W') {
          inputData.push({
            identifier: 'gwmac',
            value: this.gwmac
          })
        }
      }
      
      // 如果services为空，创建一个新的，否则更新现有的
      if (this.servicesRef.length === 0) {
        this.servicesRef.push({
          device: devicePath,
          identifier: 'set',  // 固定为set
          inputData: inputData
        })
      } else {
        // 更新现有的service
        this.servicesRef[0].device = devicePath
        this.servicesRef[0].identifier = 'set'
        this.servicesRef[0].inputData = inputData
      }
      
      // 通知父组件services已更新
      this.$emit('update:services', this.servicesRef)
    },
  },
  watch: {
    // 监听开关和亮度值的变化
    sw() {
      this.updateServices()
    },
    sl() {
      this.updateServices()
    }
  }
})
</script>

<style scoped>
.service-box {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 5px 5px;
  background-color: #eee;
}
.el-form {
  width: 70%;
}
.el-slider {
  padding: 10px 20px 10px 10px;
}
</style>
